<template>
    <div class='orderdetail-container'>
        <navcon></navcon>
        <nacsearch></nacsearch>
        <div class="main">
            <el-steps class="main" :space="240" :active="active" align-center finish-status="success">
                <el-step title="拍下商品" :description="getTime(order.createTime)"></el-step>
                <el-step title="付款到支付宝" :description="getTime(order.paymentTime)"></el-step>
                <el-step title="卖家发货" :description="getTime(order.deliveryTime)"></el-step>
                <el-step title="确认收货" :description="getTime(order.receiveTime)"></el-step>
                <el-step title="评价" :description="getTime(order.commentTime)"></el-step>
            </el-steps>

            <div class="orderinfo">
                <div class="left">
                    <div>
                        <span>订单信息</span>
                    </div>
                    <div class="address">
                        <span>收货地址：</span>
                        <span>
                            {{ order.receiverName }},86-{{ order.receiverPhone }},{{ order.receiverProvince }}
                            {{ order.receiverCity }} {{ order.receiverRegion }} {{ order.receiverDetailAddress
                            }},{{ order.receiverPostCode }}
                        </span>
                    </div>
                    <div class="words">
                        <span>买家留言：</span>
                        <span> - </span>
                    </div>
                    <div class="orderSn">
                        <span>订单编号：</span>
                        <span>{{ orderSn }}</span>
                        <span class="moreOrderInfo">
                            更多<i class="el-icon-arrow-down"></i>
                            <div class="moi-info">
                                <div class="moi-i-left">
                                    <div>
                                        <span class="order-tips">支付宝交易号：</span>
                                        <span> {{ order.alipayTradwNo }}</span>
                                    </div>
                                    <div>
                                        <span class="order-tips">成交时间：</span>
                                        <span>{{ getTime(order.createTime) }}</span>
                                    </div>
                                    <div>
                                        <span class="order-tips">付款时间：</span>
                                        <span>{{ getTime(order.paymentTime) }}</span>
                                    </div>
                                    <div>
                                        <span class="order-tips">发货时间：</span>
                                        <span>{{ getTime(order.deliveryTime) }}</span>
                                    </div>
                                    <div>
                                        <span class="order-tips">完结：</span>
                                        <span>{{ getTime(order.receiveTime) }}</span>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>
                    <div class="publisher">
                        <span>商家：</span>
                        <span @click="connectionPublisher()">联系卖家</span>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <i class="el-icon-circle-check"></i>
                        <h3> 订单状态：{{ checkTip }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import navcon from "../../components/navcon.vue"
import nacsearch from "../../components/navsearch.vue"
import { timestampToTime } from "../../utils/util"

export default {
    name: 'orderdetail',
    data() {
        return {
            active: 1,
            checkTip: '',
            orderSn: '',
            spuId: '',
            order: [],
            memberVo: [],

        };
    },
    components: {
        navcon,
        nacsearch,
    },
    methods: {

        getTime(time) {
            if ( time == null ){
                return ""
            }
            return timestampToTime(time)
        },


        /**
         * 联系卖家
         */
        connectionPublisher() {
            this.$message({
                type: 'success',
                message: '暂无法联系卖家'
            })
        },

        /**
         * 判断时间显示内容
         */
        judgeCheck() {
            if (this.order.commentTime != null) {
                this.active = 5
                this.checkTip = "已完成评论"
            } else if (this.order.receiveTime != null) {
                this.active = 4
                this.checkTip = "交易成功"
            } else if (this.order.deliveryTime != null) {
                this.active = 3
                this.checkTip = "卖家已发货"
            } else if (this.order.paymentTime != null) {
                this.active = 2
                this.checkTip = "付款已到支付宝"
            } else if (this.order.createTime != null) {
                this.active = 1
                this.checkTip = "待付款"
            }
        },


        /**
         * 获得订单信息
         */
        getOrderInfo() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-order/shitouorder/order/orderInfo?orderSn=${this.orderSn}&spuId=${this.spuId}&memberId=${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.order = data.data
                    this.judgeCheck();
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        }

    },
    async created() {
        let member = await this.$memberInfo()
        if (member != null) {
            this.memberVo = member
        }
        this.orderSn = this.$route.query.orderSn
        this.spuId = this.$route.query.spuId
        this.getOrderInfo()
    }
}
</script>
<style scoped>
@import url("../../utils/css/orderDetail.css");
</style>